# Component: Password Form

Secure input with toggleable visibility and font-based masking

Security Block

### BEM Anatomy

| Type      | Class Name          | Description                                                                                                 |
| --------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
| Bootstrap | .form-floating      | Bootstrap utility for labels that "float" within the input field on focus or when content is present.       |
| Bootstrap | .form-control       | Bootstrap utility for standardized form input styling (borders, focus states, heights).                     |
| ==Block== | `.as-form-password` | The core input container. Manages the `form-floating` logic and accessibility states.                       |
| Element   | `__group`           | The outer `input-group` wrapper that binds the text input and the toggle button together.                   |
| Element   | `__button`          | The toggle button. Contains the eye/eye-slash icons and manages the `@onclick` event.                       |
| Element   | `__input`           | The standard text/password field. Handles padding-right to prevent text from overlapping the toggle button. |
| Modifier  | `__input--show`     | Applied to the input field when `ShowPassword` is true, overriding the security font.                       |

### Font-Based Masking

Instead of switching the HTML input `type` from "password" to "text", this component maintains a text-like state but utilizes the `text-security-disc` font-face. This provides superior control over the visual masking (discs) while preventing some browser-specific password manager behaviors that can interfere with custom UIs.

##### Generated HTML (Masked State)

```html
<div class="as-form-password__group input-group">
    <div class="as-form-password form-floating" aria-invalid="false">
        <input type="text" class="as-form-password__input form-control" />
        <label class="form-label">Password</label>
    </div>
    <button class="as-form-password__button btn btn-light">
        <i class="fa-solid fa-eye"></i>
    </button>
</div>
```

##### SCSS

```scss
.as-form-password {
  .form-control {
    // Default masked state
    font-family: "text-security-disc", serif;
  }
  
  &__input {
    &--show {
      &.form-control {
        // Revert to standard font
        font-family: inherit !important;
      }
    }
  }

  &__button {
    // Matches Bootstrap standard border
    border: var(--bs-border-width) 
            var(--bs-border-style) 
            var(--bs-border-color);
  }
}
```
